<template>
  <a-modal
    :maskClosable="maskClosable"
    title="效果预测"
    :width="1100"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :okButtonProps="{ class: { 'jee-hidden': true } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <div class="analusis-wrapper">
        <div class="analysis-header">
          <a-row :gutter="[16, 25]">
            <a-col :span="4"></a-col>
            <a-col :span="16" style="text-align: center">
              <span
                class="progress-tips"
                style="background-color: rgb(34, 200, 252)"
              ></span>
              预测值
              <span
                class="progress-tips"
                style="background-color: rgb(254, 148, 1); margin-left: 40px"
              ></span>
              实际值
            </a-col>
            <a-col :span="3">偏差分析</a-col>
          </a-row>
        </div>
        <template v-if="resultDetail && resultDetail.factors">
          <div class="analysis-body">
            <a-row
              :gutter="[16, 25]"
              v-for="(d, i) in resultDetail.factors"
              :key="i"
            >
              <a-col :span="4" style="text-align: right">
                {{ d.factorName + "：" }}
              </a-col>
              <a-col :span="16" style="text-align: center; min-width: 500px">
                <span
                  class="progress-text"
                  style="color: rgb(34, 200, 252); text-align: right"
                >
                  {{ parseFloat(d.imagine).toFixed(2) + " " + d.unit }}
                </span>
                <div
                  style="display: inline-block; width: 300px; margin: 0 10px"
                >
                  <div
                    class="progress-block progress-block-blue"
                    :style="setWidth()"
                  ></div>
                  <div
                    class="progress-block progress-block-orange"
                    style="width: 100%"
                  ></div>
                </div>
                <span
                  class="progress-text"
                  style="color: rgb(254, 148, 1); text-align: left"
                >
                  {{ parseFloat(d.before).toFixed(2) + " " + d.unit }}
                </span>
              </a-col>
              <a-col :span="3">
                <div style="color: rgb(48, 183, 53)">
                  {{
                    Math.abs(parseFloat(d.imagine - d.before)).toFixed(2) +
                    " " +
                    d.unit
                  }}
                  <a-icon type="arrow-down" />
                </div>
              </a-col>
            </a-row>
          </div>
        </template>
      </div>
    </a-spin>
  </a-modal>
</template>
<script>
import { randomNum } from "@/utils/util";
import { GwListMixin } from "@/mixins/GwListMixin";
import { gPostAction } from "@/api/manage";

export default {
  name: "ForecastModal",
  mixins: [GwListMixin],
  data() {
    return {
      visible: false,
      confirmLoading: false,
      loading: false,
      model: {},
      resultDetail: {},
      modelTypeMap: {
        0: "DATACENTER_COST",
        1: "DATACENTER_DEVICE",
        2: "DATACENTER_POWER",
        3: "DATACENTER_ELECTRIC",
      },
      maskClosable: false,
    };
  },
  methods: {
    setWidth() {
      return { width: randomNum(85, 95) + "%", marginBottom: "2px" };
    },
    showModal(record) {
      this.model = Object.assign({}, record);
      this.loadData(record);
      this.resultDetail = {};
      this.visible = true;
    },
    getPredictedVal(d) {
      let field = d.key;
      let val = this.resultDetail[field];
      if (field.indexOf("Imagine") > -1 && val < 0) {
        return "预期过低，不建议调度";
      }
      return parseFloat(this.resultDetail[d.key] || "0").toFixed(2) + d.unit;
    },
    loadData(record) {
      this.confirmLoading = true;
      const postData = {
        appId: record.appId,
        datacenterId: record.dstDatacenterId,
        modelType: this.modelTypeMap[record.schedulerModel],
      };
      gPostAction("/scheduler/scheduler_effect_prediction", postData)
        .then((res) => {
          if (res.success) {
            this.resultDetail = res.data;
          }
        })
        .finally(() => {
          this.confirmLoading = false;
        });
    },
    handleCancel(e) {
      this.visible = false;
    },
  },
};
</script>

<style
  lang="less"
  scoped
>
.btn-group {
  text-align: right;

  .refresh-btn {
    margin-bottom: 15px;
  }
}

/deep/ .ant-progress-success-bg {
  background-image: linear-gradient(
    to right,
    rgb(6, 238, 237),
    rgb(34, 200, 252)
  );
}

.progress-text {
  display: inline-block;
  font-size: 16px;
  position: relative;
  bottom: 5px;
  width: 100px;
}

.progress-block-blue {
  background-image: linear-gradient(
    to right,
    rgb(6, 238, 237),
    rgb(34, 200, 252)
  );
}

.progress-block-orange {
  background-image: linear-gradient(
    to right,
    rgb(248, 189, 1),
    rgb(254, 148, 1)
  );
}

.progress-block {
  border-radius: 5px;
  /* border: 2px solid rgb(75, 118, 180); */
  height: 10px;
}

.progress-tips {
  width: 14px;
  height: 14px;
  display: inline-block;
  border-radius: 7px;
  vertical-align: middle;
}

.analusis-wrapper {
  width: 100%;

  .analysis-header {
  }

  .analysis-body {
    /deep/ .ant-progress-show-info .ant-progress-outer {
      padding-right: 0;
    }

    .analysis-progress-left {
      width: 25%;
      display: inline-block;
    }

    .analysis-progress-right {
      width: 20%;
      display: inline-block;
    }

    .analysis-progress {
      text-align: center;
    }
  }
}
</style>
